<template>
<!--新歌速递-->
  <div class="div2">
      <navClider :navText="text" v-on:handover="get"></navClider>
      <div v-if="info">
          <ul>
              <li v-for="(val,index) in info" :key="index"><courier :infoSong='val'/></li>
          </ul>
      </div>
  </div>
</template>

<script>
import require from "requests/recommend";
import courier from "@/components/homeCom/showCourier";
import navClider from "@/components/homeCom/navClider";
export default {
  name: "div2",
  data() {
    return {
      text: ["全部", "华语", "欧美", "日本", "韩国"],
      textNumber:[0,7,96,8,16],
      info: null
    };
  },
  components: {
    navClider,
    courier
  },
  methods:{
      get(val){
          console.log(this.textNumber[val])
          this.getSong(this.textNumber[val])
      },
      getSong(number){
          require.getCourier(number).then(res=>{
              this.info=res.data.data.slice(0,9)
          })
      }
  },
  mounted() {
    this.getSong(0)
  }
};
</script>

<style lang="less" scoped>
.div2{
    div{
        ul{
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
    }
}
</style>